<template>
	<div class='toc_IM_index'> 
		<div class='toc_IM_logo'>
			<img v-bind:src='avatar'>
			<span>{{name}}</span>
		</div>
		<div >
			<input class='login' placeholder="请输入用户名" v-model="username" v-on:keyup.enter="login">
			<br/>
			<mt-button size="large" type="primary" @click='login' v-bind:disabled="username.length==0">登录</mt-button>
		</div>
	</div>
</template>

<script>
	import units from '@/assets/scripts/units.js'
	import dataInterface from '@/assets/scripts/dataInterface.js'
	export default {
  	name: 'login',
  	data(){
    	return {
    		imToken:null,
    		username:'',
    		name:null,
    		password:null,
    		avatar:null,
    	}
  	},
  	mounted(){
  		
  	},
  	methods:{
  		login(){
  			this.$indicator.open({
			  	text: '正在登录',
			  	spinnerType: 'fading-circle'
			});
			this.$messageController.emit('SystemSocket_ClientLogin',{
				username:this.username,
			},'SystemSocket_ServerLogined',(data)=>{
				this.$indicator.close();
				if(data.data!==undefined){
					this.$store.commit({
					  	type: 'changeUserLoginState',
					  	isLogin:true,
					 	userId:data.data._id,
					 	accountID:data.data.accountID,
					 	avatar:data.data.avatar,
					 	name:data.data.name,
						userName:data.data.username,
						terminalSize:function(){
							if(units.browers.isMobile()){if(units.browers.isAndroid()){return 'android'}else if(units.browers.isIos()){return 'ios'}}else{return 'pc'}
						}()
					});
					this.avatar=data.data.avatar;
					this.name=data.data.name;
					this.$nextTick(()=>{this.getList(data.data._id)});
				}else{
					this.$toast({
					  	message: '登录失败',
					  	position: 'bottom',
					  	duration: 2000
					});
				};				
			});	
		},
		
		getList(userId){
			dataInterface.chatList({
				memId:userId,
				lastTime:''
			},(res)=>{
				this.$store.commit({
		  			type: 'loadMessageList',
		  			data:res
	  			});
	  			this.$router.push({name: 'messageList'});
			});
		}
  	}
  }
</script>

<style>

	div.toc_IM_logo{
		margin: 50px auto 50px;
		display: table;
		width: 100px;
		height: 120px;
		border-radius: 5px;
		text-align: center;
		font-size: 14px;
	}
	div.toc_IM_logo img{
		width: 100%;
		float: left;
	}
	div.toc_IM_logo span{
		width: 100%;
		margin: 10px 0;
		float: left;
	}
	div.toc_IM_index input.login{
		width: 100%;
		height: 50px;
		background: #fff;
		outline: 0;
		line-height: 50px;
		border: none;
		display: inline-block;
		margin: 50px auto;
		box-sizing: border-box;
		padding: 7px 10px;
	}
</style>